<template>
  <div>
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiper-slide
        ><img
          class="w-100"
          src="../assets/images/220c944fd098d48b8560d6da7804dbe6.jpeg"
          alt=""
      /></swiper-slide>
      <swiper-slide
        ><img
          class="w-100"
          src="../assets/images/5b425fef8a63b13830b27ee0b51d1fb2.jpeg"
          alt=""
      /></swiper-slide>
      <swiper-slide
        ><img
          class="w-100"
          src="../assets/images/931bb482e54944f9155d4c7f80607090.jpeg"
          alt=""
      /></swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-2"
        slot="pagination"
      ></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>

    <!-- 图标导航 -->
    <div class="nav-icons bg-white mt-3 text-center pt-3">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-stories"></i>
          <div class="py-2">故事站</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-shops"></i>
          <div class="py-2">周边商城</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-tiyan"></i>
          <div class="py-2">体验服</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-new_person"></i>
          <div class="py-2">新人专区</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-glory"></i>
          <div class="py-2">荣耀·传承</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-camp"></i>
          <div class="py-2">王者营地</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-public"></i>
          <div class="py-2">公众号</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-edition"></i>
          <div class="py-2">版本介绍</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-env"></i>
          <div class="py-2">对局环境</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-plan"></i>
          <div class="py-2">IP共创计划</div>
        </div>
        <div class="nav-item mb-3 pt-3 text-grey">
          <i class="sprite sprite-interactive"></i>
          <div class="py-2">创意互动营</div>
        </div>
      </div>

      <!-- 收起 -->
      <div class="bg-light py-2 text-grey1">
        <span class="entry-icon"></span>收起
      </div>
    </div>

    <!-- 新闻资讯 -->
    <m-list-card title="新闻资讯" icon="Menu" :categories="newsCats">
      <template #items="{ category }">
        <router-link tag="div" :to="`/articles/${news._id}`" 
          class="py-2 fs-lg d-flex" v-for="(news, i) in category.newsList" :key="i">
          <span class="text-dark1">[{{news.categoryName}}]</span>
          <span class="px-1">|</span>
          <span class="flex-1 text-dark text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey fs-sm">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <!-- 英雄列表 -->
    <m-list-card title="英雄列表" icon="card-hero" :categories="heroesCats">
      <template #items="{ category }">
        <div class="d-flex flex-wrap" style="margin:0 -0.4rem">
         <router-link tag="div" :to="`/heroes/${hero._id}`" class="p-2"  style="width:20%" v-for="(hero, i) in category.heroesList" :key="i">
           <img class="w-100" :src="hero.avatar" alt="">
           <div class="text-center">{{ hero.name }}</div>
         </router-link>
        </div>
      </template>
    </m-list-card>

    <!-- 精彩视频 -->
    <m-list-card title="精彩视频" icon="tabbarhomeselect"></m-list-card>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  filters:{
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOption: {
        // 自动切换
        autoplay: true,
        // 环路
        loop: true,
        // 前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 切换效果cube
        // effect: "cube",
      },
      // 新闻列表
      newsCats: [],
      // 英雄列表
      heroesCats: [],
    };
  },
  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
    },
    async fetchHeroesCats() {
      const res = await this.$http.get('heroes/list')
      this.heroesCats = res.data
    },
  },
  created(){
    this.fetchNewsCats()
    this.fetchHeroesCats()
  },
};
</script>

<style lang='scss'>
@import "../assets/scss/_variables.scss";

.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background-color: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, "info");
    }
  }
}

// 图标
.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: none;
    }
  }
}

// 收起
.entry-icon {
  display: inline-block;
  margin-right: 2px;
  background: url("../assets/images/index.png") no-repeat 38.577% 52.076%;
  background-size: 375px 455px;
  width: 0.769231rem;
  height: 0.769231rem;
}
</style>